import QtQuick 1.1
import com.nokia.meego 1.1
import com.nokia.extras 1.1

Page {
    id: expenseEdit_P

    property string expns_id

    property bool edit: false
    property alias payerIndex: payerColumn.selectedIndex

    function close(save)
    {
        if(save) {
            var splits = ""
            for (var i=0; i<splitList.count; i++) {
                splitList.currentIndex = i
                if(splits != "") {
                    splits += ","
                }
                splits += splitList.currentItem.split
            }
            myExpense.descr = descr.text
            myExpense.amnt  = amnt.text
            myExpense.crncy = crncy.text
            myExpense.payer = payerIndex
            myExpense.date  = date_bt.text
            myExpense.time  = time_bt.text
            myExpense.split = splits
            myData.editExpense(edit,expns_id)
        }
        appWindow.pageStack.pop()
    }

    Rectangle {
        id: titleField
        height: 56
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 20
        color: "#6400BC"
        Row {
            anchors.leftMargin: 20
            anchors.verticalCenter: titleField.verticalCenter
            height: parent.height
            Image {
                id: supplement
                source: "qrc:/icons/notes-inverse64.png"
                height: titleLabel.height
                width: 75
                fillMode: Image.PreserveAspectFit
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                anchors.verticalCenter: parent.verticalCenter
            }

            Label {
                id: titleLabel
                anchors.verticalCenter: parent.verticalCenter
                font.capitalization: Font.MixedCase
                text: edit? "Edit Expense" : "Add Expense"
            }
        }

        Image {
            id: closeButton
            anchors.verticalCenter: titleField.verticalCenter
            anchors.right: titleField.right
            anchors.rightMargin: 20
            height: titleLabel.height
            fillMode: Image.PreserveAspectFit

            source: "image://theme/icon-m-common-dialog-close"
            smooth: true

            MouseArea {
                id: closeButtonArea
                anchors.fill: parent
                onClicked:  { close(false); }
            }
        }
    }

    ButtonRow {
        id: edit_tabs
        anchors {
            top: titleField.bottom
            horizontalCenter: parent.horizontalCenter
        }
        style: TabButtonStyle { }
        TabButton {
            //iconSource: "image://theme/icon-s-common-drive-inverse"
            text: "Payment"
            tab: tab1
        }
        TabButton {
            //iconSource: "image://theme/icon-m-toolbar-people-white"
            text: "Split"
            tab: tab2
        }
    }
    TabGroup {
        id: editTabGroup
        anchors {
            top: edit_tabs.bottom
        }
        height: parent.height - (titleField.height + buttons.height + 100 )
        currentTab: tab1
        clip: true
        Page {
            id: tab1
            anchors.fill: parent
            Column {
                id: edit_C
                width: parent.width
                spacing: 20
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.topMargin: 20
                anchors.top: parent.top
                //Column {
                //    id: expense
                //    height: 500 
                //    width:parent.width
                //    Column {
                //        id: col
                //        spacing:20
                //        anchors.left: parent.left
                //        anchors.leftMargin: 20
                //        width:parent.width
                        Column {
                            spacing: 5
                            width:parent.width
                            Label {
                                text: "Description"
                            }
                            TextField {
                                id: descr
                                maximumLength: 80
                                width: parent.width*0.9
                                text: myExpense.descr
                                anchors.left: parent.left
                                placeholderText: "Expense Description"
                            }
                        }
                        Row {
                            width:parent.width
                            Column {
                                spacing: 5
                                width:parent.width/2
                                Label {
                                    text: "Amount"
                                }
                                TextField {
                                    id: amnt
                                    text: myExpense.amnt 
                                    width: parent.width*0.9
                                    inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
                                    validator: DoubleValidator { bottom:0; decimals: 2}
                                    placeholderText: "0.00"
                                }
                            }
                            Column {
                                spacing: 5
                                width:parent.width/2
                                Label {
                                    text: "Currency Rate"
                                }
                                TextField {
                                    id: crncy
                                    text: myExpense.crncy 
                                    width: parent.width*0.9
                                    inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
                                    validator: DoubleValidator { bottom:0; decimals: 2}
                                }
                            }
                        }
                        Column {
                            width:parent.width
                            spacing: 5
                            Label {
                                anchors.topMargin: 20
                                text: "Payer"
                            }
                            TumblerButton {
                                id: payer_bt
                                width: parent.width*0.9
                                onClicked: selectPayer()
                                text: myNames[myExpense.payer] 
                            }
                        }
                        Row {
                            width:parent.width
                            Column {
                                spacing: 5
                                width:parent.width*0.60
                                Label {
                                    text: "Date"
                                }
                                TumblerButton {
                                    id: date_bt
                                    width: parent.width*0.8
                                    onClicked: selectDate(date_bt.text)
                                    text: myExpense.date
                                }
                            }
                            Column {
                                spacing: 5
                                width:parent.width*0.40
                                Label {
                                    text: "Time"
                                }
                                TumblerButton {
                                    id: time_bt
                                    width: parent.width*0.8
                                    onClicked: selecttime(time_bt.text)
                                    text: myExpense.time
                                }
                            }
                        }
                    //}
                //}

            }

        }
        Page {
            id: tab2
            anchors.fill: parent
            ListView {
                id: splitList
                anchors.fill: parent
                model: ListModel {id: splitModel}
                anchors.topMargin: 20
                delegate: Row {
                    property variant split: split_T.text
                    width:parent.width
                    spacing:10 
                    height: 70
                    anchors.leftMargin: 10
                    anchors.left: parent.left
                    Label {
                        id: name_T
                        text: model.name
                        font.pixelSize: 40
                        width: (parent.width - split_B.width)*0.9
                        elide: Text.ElideRight
                    }
                    ButtonRow {
                        id: split_B
                        anchors {
                            rightMargin: 10
                        }
                        width: 200
                        height: 25
                        exclusive: false
                        Button { iconSource: "image://theme/icon-s-common-remove";onClicked: if(split_T.text>0){split_T.text-=1} }
                        Button { id: split_T; enabled:false; text: model.split }
                        Button { iconSource: "image://theme/icon-s-common-add";onClicked: split_T.text = Number(split_T.text)+1 }
                    }
                }
                focus: true
                spacing: 5
            }
        }
    }


    function selectPayer() {
        pDialog.open();
    }

    TumblerDialog {
        id: pDialog
        titleText: "Select Payer"
        acceptButtonText: "Ok"
        rejectButtonText: "Cancel"
        columns: [ payerColumn ]
        onAccepted: {payer_bt.text = myNames[payerIndex]}
    }

    TumblerColumn {
        id: payerColumn
        items: myNames
        label: "Payer"
        selectedIndex: 0
    }

    function selecttime(time) {
        var hm = time_bt.text.split(":")
        tDialog.hour = hm[0];
        tDialog.minute = hm[1];
        tDialog.open();
    }
    function timeFunction() {
        time_bt.text = tDialog.hour + ":" + (tDialog.minute < 10 ? "0" : "" ) + tDialog.minute;
    }
    TimePickerDialog {
        id: tDialog
        titleText: "Time"
        acceptButtonText: "Ok"
        rejectButtonText: "Cancel"
        onAccepted: timeFunction()
        fields: DateTime.Hours | DateTime.Minutes
    }

    function selectDate(date) {
        var d = date.split("-");
        dDialog.year = d[0];
        dDialog.month = d[1];
        dDialog.day = d[2];
        dDialog.open();
    }

    function launchDate(year, month, date) {
        dDialog.minimumYear = year - 10;
        dDialog.maximumYear = year + 10;
        dDialog.year = year;
        dDialog.month = month;
        dDialog.day = date;
        dDialog.open();
    }

    function dateFunction() {
        date_bt.text = dDialog.year + "-" + (dDialog.month < 10 ? "0" : "" ) + dDialog.month + "-" + (dDialog.day < 10 ? "0" : "" ) + dDialog.day
    }

    DatePickerDialog {
        id: dDialog
        titleText: "Date"
        onAccepted: dateFunction()
    }

    ButtonRow {
        id: buttons
        height:50
        platformStyle: ButtonStyle { }
        anchors {
            horizontalCenter: parent.horizontalCenter
            top: editTabGroup.bottom
        }
        Button {id: b1; text: "OK"; onClicked: close(true)}
        Button {id: b2; text: "Cancel"; onClicked: close(false)}
    }

    Component.onCompleted: {
        var splits = myExpense.split.split(",")
        var i = 0
        for (i=0; i<splits.length; i++) {
            splitModel.append({"name":myNames[i],"split":splits[i]})
        }
        payerColumn.selectedIndex = myExpense.payer
    }
}
